<%@ page contentType="text/html;charset=UTF-8" %>
<%@ include file="/WEB-INF/views/include/taglib.jsp"%>
<html>
<head>
	<title>${fns:getConfig('productName')}</title>
	<meta name="decorator" content="adminlte"/>

    <link rel="stylesheet" href="${ctxStatic}/jerichotab/css/jquery.jerichotab.css" />
    <script type="text/javascript" src="${ctxStatic}/jerichotab/js/jquery.jerichotab.js"></script>


    <link rel="stylesheet" href="${ctxStatic}/bootstrap/css/bootstrap.css">
    <!-- Font Awesome -->
    <link rel="stylesheet" href="${ctxStatic}/font-awesome-4.7.0/css/font-awesome.min.css">
    <!-- Ionicons -->
    <link rel="stylesheet" href="${ctxStatic}/ionicons-2.0.1/css/ionicons.min.css">
    <!-- Theme style -->
    <link rel="stylesheet" href="${ctxStatic}/adminlte/css/AdminLTE.min.css">
    <!-- AdminLTE Skins. We have chosen the skin-blue for this starter
          page. However, you can choose any other skin. Make sure you
          apply the skin class to the body tag so the changes take effect. -->
    <link rel="stylesheet" href="${ctxStatic}/adminlte/css/skins/skin-blue.css">


	<style type="text/css">
        .sidebar-menu>li>a{
            padding-left:10px;
        }
        .sidebar-menu>li>ul>li>a {
            padding-left:20px;
        }
        .sidebar-menu>li>ul>li>ul>li>a {
            padding-left:30px;
        }
        .sidebar-menu>li>ul>li>ul>li>ul>li>a {
            padding-left:40px;
        }
        .sidebar-menu>li>ul>li>ul>li>ul>li>ul>li>a {
            padding-left:50px;
        }
        .content{
            padding:0;
        }


        .jericho_tab .tab_pages {background:white;}
        .jericho_tab .tab_pages .tabs {height:33px;}
        .jericho_tab .tab_pages .tab_unselect .tab_left {margin-top:0px;background:none;}
        .jericho_tab .tab_pages .tab_unselect .tab_right {margin-top:0px;background:none;}
        .jericho_tab .tab_pages .tab_unselect_h .tab_left {margin-top:0px;background: #f4f6f8;}
        .jericho_tab .tab_pages .tab_unselect_h .tab_right {margin-top:0px;background: #f4f6f8;}
        .jericho_tab .tab_pages .tab_selected div.tab_left {background:#eaedf1; }
        .jericho_tab .tab_pages .tab_selected div.tab_right {background:#eaedf1; }
        .jericho_tab .tab_pages .tab_unselect div {height:33px;line-height:33px;}
        .jericho_tab .tab_pages .tab_selected div {height:33px;line-height:33px;}

        .jericho_tab .tab_pages .tabs div.tab_right{
            border-right: 1px solid rgb(221, 221, 221);
        }
        .jericho_tab .tab_pages  div.tab_left .tab_text{
            color:#23508e;
            font-size: 12px;
        }

        .jericho_tab .tab_pages .tab_selected .tab_left .tab_close a,
        .jericho_tab .tab_pages .tab_unselect .tab_left .tab_close a {
            background: url("${ctxStatic}/images/close.gif");
            background-size: contain;
        }
        .jericho_tab .tab_pages .tab_left .tab_close a:hover{
            background: url("${ctxStatic}/images/close_hover.png");
            background-size: contain;
        }
	</style>
</head>

<body>
    <div class="wrapper">
        <header class="main-header">
            <jsp:include page="sysIndex/topMenu.jsp"/>
        </header>

        <aside class="main-sidebar">
            <jsp:include page="sysIndex/leftMenu.jsp"/>
        </aside>

        <div class="content-wrapper">
            <section class="content container-fluid" style="height: 100%;">
                <div id="right"></div>
            </section>
        </div>

        <aside class="control-sidebar control-sidebar-dark">
            <jsp:include page="sysIndex/rightMenu.jsp"/>
        </aside>
        <!-- Add the sidebar's background. This div must be placed immediately after the control sidebar -->
        <div class="control-sidebar-bg"></div>

        <%@include file="/WEB-INF/views/include/foot.jsp" %>

    </div>


    <script type="text/javascript">
        var tabTitleHeight = 33;
        var totleHeight = $("body").height();
        var headHeight = 50;
        var footerHeight = 51;
        var padding = 7;

        function addTab($this, refresh){
            $.fn.jerichoTab.addTab({
                tabFirer: $this,
                title: $this.find("span").text(),
                closeable: true,
                data: {
                    dataType: 'iframe',
                    dataLink: $this.attr('data-href')
                }
            }).loadData(refresh);
            return false;
        }

        function getIfameContentHeight(iframe) {
            var height = 0;
            var iframeWin = iframe.contentWindow || iframe.contentDocument.parentWindow;
            if (iframeWin.document.body) {
                height = iframeWin.document.documentElement.scrollHeight || iframeWin.document.body.scrollHeight;
            }
            console.log(height);
            return height;
        };

        var opennerCallback
        function showPopWindow(title, url, callback){
            $("#myModal .modal-title").text(title);

            $("#myModal .modal-body iframe").contents().find("body").html("");
            $("#myModal .modal-body iframe").attr("src", url);

            $('#myModal').modal({backdrop:'static', show: true});
            opennerCallback = callback;
        }
        function dismissPopWindow(){
            $('#myModal').modal('hide');
            opennerCallback();
        }

        $(document).ready(function() {
            $.fn.initJerichoTab({
                renderTo: '#right',
                uniqueId: 'jerichotab',
                contentCss: { 'height': totleHeight -  headHeight - tabTitleHeight - footerHeight - padding},
                tabs: [],
                loadOnce: true,
                tabWidth: 110,
                titleHeight: tabTitleHeight
            });

            $(window).resize(function() {
                var w = $(document).width() - $(".sidebar").width();
                $('#right').css({ width: w});

                $(".content-wrapper section")[0].style.height = $(".content-wrapper").css("min-height");

                $("#jerichotab_contentholder").height($(".content-wrapper section").height());
                $("#jerichotab_contentholder .content").height($(".content-wrapper section").height());
                $("#jerichotab_contentholder iframe").height($(".content-wrapper section").height());
            });

            //每次加载后，调整model层的高度
            var iframe = $("#myModal .modal-body iframe")[0];
            if (iframe.attachEvent) {
                iframe.attachEvent("onload", function() {
                    $("#myModal .modal-body").height(getIfameContentHeight(iframe));
                });
            } else {
                iframe.onload = function() {
                    $("#myModal .modal-body").height(getIfameContentHeight(iframe));
                };
            }
        });

    </script>

    <div id="myModal" class="modal fade" tabindex="-1" role="dialog">
        <div class="modal-dialog modal-lg" role="document">
            <div class="modal-content">
                <div class="modal-header">
                    <button type="button" class="close" data-dismiss="modal" aria-label="Close"><span aria-hidden="true">&times;</span></button>
                    <h4 class="modal-title"></h4>
                </div>
                <div class="modal-body" style="min-height: 200px; max-height: 800px">
                    <iframe style="height: 100%; width: 100%; border: none;"/>
                </div>
            </div>
        </div>
    </div>


</body>
</html>